<template>
    <view class="page">
        <view class="list">
            <view class="item" v-for="(item, index) in list" :key="index">
                <view class="info">
                    <view class="name">用户名称：{{ item.username }}</view>
                </view>
                <view class="info">
                    <view class="name">用户密码：{{ item.pass_show }}</view>
                </view>
                <view class="info">
                    <view class="name">联系方式：{{ item.mobile }}</view>
                </view>
                <view class="info">
                    <view class="name">微信账号：{{ item.user_detail.wechat }}</view>
                </view>
                <view class="info">
                    <view class="name">备注信息：{{ item.user_detail.content }}</view>

                </view>
                <view class="btn">
                    <view @click="toEdit(item)">编辑</view>
                    <view @click="del(item.id)">删除</view>
                    <view @click="toCartList(item.id)">查看队员</view>
                </view>
                <view style="width: 100%;height: 20rpx;"></view>
            </view>
        </view>
        <view style="margin-top: 300rpx;" v-if="list.length == 0">
            <u-empty mode="data" text="暂无数据～">
            </u-empty>
        </view>
        <view class="add" @click="add">+</view>
    </view>
</template>

<script>
import { userlist, userdelete } from "@/api/user.js"
export default {
    components: {},
    props: {},
    data() {
        return {
            keyword: '',
            page: 1,
            pagesize: 10,
            type: '3',
            list: []
        };
    },
    watch: {},
    methods: {
        getList() {
            userlist({
                page: this.page,
                pagesize: this.pagesize,
                type: this.type
            }).then(res => {
                console.log(res)
                if (this.page == 1) {
                    this.list = res.data
                } else {
                    this.list = this.list.concat(res.data)
                }
            })
        },
        add() {
            uni.navigateTo({ url: '/pages/manufacturer/addMerchant?type=add' })
        },
        toDetails(id) {
            uni.navigateTo({ url: '/pages/manufacturer/disposition?id=' + id })
        },
        del(id) {
            let _this = this;
            uni.showModal({
                title: '提示',
                content: '确认删除吗?',
                showCancel: true,
                success: ({ confirm, cancel }) => {
                    if (confirm) {
                        userdelete({
                            userIds: id
                        }).then(res => {
                            if (res.code == 1) {
                                uni.showToast({
                                    title: res.msg,
                                    icon: 'none',
                                    mask: true
                                })
                                _this.page = 1;
                                _this.list = []
                                _this.getList()
                            }
                        })
                    }
                }
            })
        },
        toEdit(item) {
            uni.navigateTo({ url: '/pages/manufacturer/addMerchant?type=edit&username=' + item.username + '&pass_show=' + item.pass_show + '&id=' + item.id + '&mobile=' + item.mobile })
        },
        toCartList(id) {
            uni.navigateTo({ url: '/pages/manufacturer/cartUser?pid=' + id })
        }
    },
    onReachBottom() {
        if (this.list.length > 10) {
            this.page++;
            this.getList()
        }
    },
    onShow() {
        this.page = 1;
        this.list = []
        this.getList()
    },
    onLoad(option) {
        console.log(option)
    },
};
</script>
<style scoped lang='scss'>
.page {
    // background-color: #efefef;
    width: 100%;
    min-height: 100vh;
}

.search {
    width: 94%;
    left: 3%;
    margin: auto;
    // margin-top: 30rpx;
    height: 80rpx;
    position: fixed;
    background-color: #fff;
    top: 0rpx;
    z-index: 99999;
}

.list {
    width: 94%;
    margin: auto;
    margin-top: 30rpx;
}

.item {
    width: 100%;
    // height: 166px;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    border-radius: 12px 12px 12px 12px;
    margin-top: 30rpx;

    .info {
        width: 94%;
        margin: auto;
        display: flex;
        padding-top: 20rpx;

        .name {
            width: 90%;
            font-size: 30rpx;
            font-weight: 600;
        }

        .status {
            font-size: 28rpx;
            font-weight: 600;
        }

        .a {
            color: green;
        }

        .b {
            color: #dd524d;
        }
    }

    .btn {
        display: flex;
        margin-top: 30rpx;

        view:nth-child(1) {
            width: 105px;
            height: 46px;
            background: #007aff;
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #D9D9D9;
            margin: auto;
            text-align: center;
            line-height: 46px;
            color: #fff;
        }

        view:nth-child(2) {
            width: 105px;
            height: 46px;
            background: #dd524d;
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #D9D9D9;
            margin: auto;
            text-align: center;
            line-height: 46px;
            color: #fff;
        }

        view:nth-child(3) {
            width: 105px;
            height: 46px;
            background: #f1b817;
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #D9D9D9;
            margin: auto;
            text-align: center;
            line-height: 46px;
            color: #fff;
        }
    }

}

.add {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50rpx;
    background-color: $uni-color-primary;
    position: fixed;
    bottom: 120rpx;
    font-size: 44rpx;
    text-align: center;
    line-height: 80rpx;
    color: #fff;
    right: 30rpx;
}
</style>